<template>
  <div class="dashboard-container">
    <div class="app-container">
      <!-- 靠右的按钮 -->
      <PageTools>
        <template v-slot:after>
          <!-- 这里添加的是访问权 -->
          <!-- 第一个参数是要添加到哪个节点下 添加到根节点下-->
          <el-button
            type="primary"
            size="small"
            @click="handlerAddDialog({ scope: { id: '0' }, type: 1 })"
          v-power="'addPermission'" >添加权限</el-button
          >
        </template>
      </PageTools>
      <el-card>
        <LTable
          :tableData="listTree"
          border
          rowKey="id"
          :column="column"
          :rowHeight="50"
        >
          <template v-slot:options="{ scope }">
            <el-button type="text" @click="handlerAddDialog({ scope, type: 2 })"
             v-power="'addPermission'"  >添加</el-button
            >
            <el-button type="text" v-power="'editPermission'" @click="handlerEdit(scope)">编辑</el-button>
            <el-button type="text" @click="handlerDelete(scope)"
            v-power="'delPermission'" >删除</el-button
            >
          </template>
        </LTable>
      </el-card>
      <add-permissions
        ref="dialogRef"
        :showDialog.sync="showDialog"
        @confirm="handlerConfirm"
        :validate="validate"
      />
    </div>
  </div>
</template>

<script>
import {
  getAllPermissionAPI,
  deletePermissionAPI,
  createPermissionAPI,
  updatePermissionAPI,
} from "@/api/permissions";
import tranTree from "@/utils/format-to-tree";
import addPermissions from "./components/add-permissions.vue";
export default {
  components: { addPermissions },
  data() {
    return {
      column: Object.freeze([
        { prop: "name", label: "权限名称", align: "center" },
        { prop: "code", label: "权限标识", align: "center" },
        { prop: "description", label: "权限描述", align: "center" },
        { label: "操作", slot: "options", align: "center" },
      ]),
      listTree: [], // 接收树形数据
      type: 1,
      pid: "0",
      validate:[],
      showDialog: false,
    };
  },
  computed: {},
  created() {
    this.getAllPermission(); //获取权限列表
  },
  methods: {
    //获取权限列表
    async getAllPermission() {
      const { data } = await getAllPermissionAPI();
      this.listTree = tranTree(data);
      this.validate=data
    },
    //点击新增权限btn
    handlerAddDialog({ scope: { id }, type }) {
      this.type = type;
      this.pid = id;
      this.showDialog = true;
    },
    //删除权限
    handlerDelete(data) {
      this.$confirm(`删除${data.name}, 是否继续?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          const res = await deletePermissionAPI(data.id);
          this.$message({
            type: "success",
            message: res.message,
          });
           this.getAllPermission(); //获取权限列表
        })
        .catch(() => {});
    },
    //点击确认按钮
    async handlerConfirm(data) {
      if (data.id) {
        //id存在为编辑
        const res = await updatePermissionAPI(data);
        this.$message({
          type: "success",
          message: res.message,
        });
       this.$refs.dialogRef.closeDialog()
        this.getAllPermission(); //获取权限列表
      }else{
        const form={type:this.type,pid:this.pid,...data}
      
     const res= await  createPermissionAPI(form)
     this.$message({
          type: "success",
          message: res.message,
        });
               this.$refs.dialogRef.closeDialog()
        this.getAllPermission(); //获取权限列表
      }

    },
    //编辑权限
    handlerEdit(data) {
      this.$refs.dialogRef.formData = {...data};
      this.showDialog = true;
    },
  },
};
</script>

<style>
</style>
